<template>
  <div id="myelement">
    text : {{ text }}
    <input type="text" v-model="text" />
    text1 : {{ text1 }}
    <input type="text" v-model.lazy="text1" />
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { snapdom } from '@zumer/snapdom'
export default {
  data() {
    return {
      text: '',
      text1: ''
    }
  },
  methods: {
    onTap(e) {
      console.log(e)
      //e.stopPropagation()
    },
    onTap1() {
      console.log(`helloworld`)
      //A B
      //A create something and exchange it for 100 with B.
      //A get 100 to buy other things from B.
      //the same thing is double the price of what it was two years ago.
    },
    async add() {
      const el = document.querySelector('#myelement')
      const result = await snapdom(el, { scale: 1 })
      const img = await result.toPng()
      document.body.appendChild(img)
    }
  },
  async mounted() {
    console.log(nanoid())
    //基本模型
    //100 100
    //控制节奏
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  padding: 10px;
  border: 1px solid blue;
  &-wrap {
    padding: 20px;
    border: 1px solid red;
  }
  &-inner {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
  }
}
</style>
